<template>
    <div v-if="dialogVisible" class="back">
            <!--打印区域开始-->
            <div class="print-area" ref="print">
                <div class="head-container">
                    <div class="head flex">
                        <div class="img f1">
                            <img src="../../assets/schaman.png" alt="" width="100%">
                        </div>
                        <div class="title f3">
                            <div class="sub-title">装箱单汇总</div>
                            <div class="sub-title"> PACKAGE SUMMARY</div>
                        </div>
                        <div class="list f2">
                        </div>
                    </div>
                </div>
                <div class="table-container">
                    <div class="row flex">
                        <div class="cell f1">序号</div>
                        <div class="cell f2">箱号</div>
                        <div class="cell f3">货物名称</div>
                        <div class="cell f1">单位</div>
                        <div class="cell f1">件数</div>
                        <div class="cell f7">包装Package</div>
                        <div class="cell f4">长×宽×高</div>
                        <div class="cell f1">体积</div>
                        <div class="cell f1">净重</div>
                        <div class="cell f1">毛重</div>
                        <div class="cell f3">备注</div>

                    </div>
                    <div class="row flex">
                        <div class="cell f1">No</div>
                        <div class="cell f2">Pkg No</div>
                        <div class="cell f3">Description</div>
                        <div class="cell f1">Unit</div>
                        <div class="cell f1">Qty</div>
                        <div class="cell f3">胶合板木箱</div>
                        <div class="cell f4">Package Type</div>
                        <div class="cell f4">L×W×H（MM）</div>
                        <div class="cell f1">Vol. M3</div>
                        <div class="cell f1">N.W KG</div>
                        <div class="cell f1">G.W KG</div>
                        <div class="cell f3">Remark</div>
                    </div>
                    <div class="row flex" v-for="(item,idx) in boxList" :key="idx">
                        <div class="cell f1">{{idx+1}}</div>
                        <div class="cell f2">{{item.packingOrderNumber}}</div>
                        <div class="cell f3">汽车配件/Truck parts</div>
                        <div class="cell f1">件</div>
                        <div class="cell f1">{{item.totalNumber}}</div>
                        <div class="cell f3">胶合板木箱</div>
                        <div class="cell f4">Plywood case</div>
                        <div class="cell f4">{{item.lwh}}</div>
                        <div class="cell f1">{{item.volume}}</div>
                        <div class="cell f1">{{item.netWeight}}</div>
                        <div class="cell f1">{{item.grossWeight}}</div>
                        <div class="cell f3"></div>
                    </div>
                    <div class="sum flex">
                        <div class="f2">总计Total：</div>
                        <div class="f3">件数/Quantity:{{boxList.length}}</div>
                        <div class="f3">体积/Volume:{{total.totalVolume}} m3</div>
                        <div class="f3"> 净重/ Net weight:  {{total.totalNetWeight}}  Kg  </div>
                        <div class="f3"> 毛重/Gross Weight:  {{total.totalGrossWeight}}  Kg  </div>
                    </div>

                </div>
            </div>
            <!--打印区域结束-->
            <span  class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="print">打印</el-button>
          </span>

    </div>
</template>

<script>
    export default {
        name:'print',
        props: ['boxList', 'total', 'dialogVisible'],
        methods: {
            print() {
                this.$print(this.$refs.print);
            }
        },
    }
</script>

<style scoped lang="scss">
    .back{
        position: fixed;
        overflow: scroll;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        background: white;
        border: 1px solid #ddd;
        box-shadow: 5px 5px 5px #ddd;
        z-index: 9999;
    }
    .print-area {
        font-size: 14px;
        border: 1px solid #ddd;
        width: 297mm;
        /*height: 210mm;*/
        .head-container{
            height: auto;
            border-bottom: 1px solid #000;
            .head{
                height: 100%;
            }
            .title{
                display: flex;
                flex-flow: column;
                .sub-title{
                    flex: 1;
                    line-height: 83px;
                    font-size: 30px;
                    border: 1px solid #ddd;
                    border-bottom: none;
                }
            }
            li{
                box-sizing: border-box;
                border-bottom: 1px solid #000;
                span{
                   &:nth-child(2n){
                       border-left: 1px solid #000;
                   }
                }
                &:last-child{
                    border-bottom: none;
                }
            }
        }
        .table-container{
            .row{
                border-bottom: 1px solid #000;
                .cell{
                    border-right: 1px solid #000;
                }
            }
        }
        .flex{
            display: flex;
            .f1{
                flex: 1;
            }
            .f2{
                flex: 2;
            }
            .f3{
                flex: 3;
            }
            .f4{
                flex: 4;
            }
            .f7{
                flex: 7;
            }
        }
    }

    @media print {
        html, body {
            width: 297mm;
            /*height: 210mm;*/
        }
        .print-area {
            width: 297mm;
            /*height: 210mm;*/
            .head-container{
                text-align: center;
                height: 190px;
                border-bottom: 1px solid #000;
                .head{
                    height: 190px;
                }
                .title{
                    display: flex;
                    flex-flow: column;
                    .sub-title{
                        flex: 1;
                        line-height: 83px;
                        font-size: 30px;
                        border: 1px solid #ddd;
                        border-bottom: none;
                    }
                }
                li{
                    box-sizing: border-box;
                    border-bottom: 1px solid #000;
                    span{
                        &:nth-child(2n){
                            border-left: 1px solid #000;
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                    }
                }
            }
            .table-container{
                border-left: 1px solid #000;
                .row{
                    border-bottom: 1px solid #000;
                    .cell{
                        border-right: 1px solid #000;
                    }
                }
            }
            .flex{
                display: flex;
                .f1{
                    flex: 1;
                }
                .f2{
                    flex: 2;
                }
                .f3{
                    flex: 3;
                }
                .f4{
                    flex: 4;
                }
                .f7{
                    flex: 7;
                }
            }
        }
    }
</style>